<!-- 证书预览 -->
<template>
  <div class="certificate-container">
    <div class="certificate-bg">
      <img :src="backgroundUrl" alt="证书背景" class="bg-image" />
      <div class="text-zone">
        <div
          v-for="field in fields"
          :key="field.fieldKey"
          class="dynamic-text"
          :style="fieldStyle(field)"
        >
          {{ field.fieldLabel || field.fieldKey }}
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "CertificatePreview",
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    backgroundUrl() {
      return this.data.backgroundUrl || "";
    },
    fields() {
      return this.data.certificateFieldList || [];
    },
  },
  methods: {
    fieldStyle(field) {
      return {
        fontFamily: field.fontFamily,
        fontSize: field.fontSize + "px",
        color: field.fontColor,
        letterSpacing: field.letterSpacing + "px",
        lineHeight: field.lineHeight,
        textAlign: field.textAlign,
        fontWeight: field.fontWeight,
        fontStyle: field.italic ? "italic" : "normal",
        textDecoration: field.underline ? "underline" : "none",
      };
    },
  },
};
</script>

<style scoped>
/* 复用 ViewCertificateDialog 的样式 */
.certificate-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.certificate-bg {
  position: relative;
  width: 400px;
  height: 600px;
  /* width: 100%;
  height: 100%; */
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  overflow: hidden;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  grid-template-columns: 1fr;
  gap: 10px;
  z-index: 20;
  font-family: SimHei;
}

.name {
  grid-row: 3;
  text-align: center;
}
.date {
  grid-row: 5;
  text-align: center;
}
.validity {
  grid-row: 6;
  text-align: center;
}
.no {
  grid-row: 7;
  text-align: center;
}
.issuer {
  grid-row: 9;
  text-align: center;
}
.default {
  grid-row: 4;
  text-align: center;
}

.dynamic-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin: 10px 0 !important;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
</style>

